<template>
  <div class="demo">
    <div class="demo-title">三种触发方式</div>
    <div class="demo-content">
      <Popover title="Title" trigger="hover">
        <template #content>
          <p>Content</p>
          <p>Content</p>
        </template>
        <Button class="btn">Hover me</Button>
      </Popover>
      <Popover title="Title" trigger="focus">
        <template #content>
          <p>Content</p>
          <p>Content</p>
        </template>
        <Button class="btn">Focus me</Button>
      </Popover>
      <Popover title="Title" trigger="click">
        <template #content>
          <p>Content</p>
          <p>Content</p>
        </template>
        <Button class="btn">Click me</Button>
      </Popover>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Button from '@sscd/button';
  import Popover from '@sscd/popover';
</script>

<style lang="less" scoped>
  .btn {
    margin-right: 8px;
  }
</style>
